<html lang="en"><head>
    <meta charset="utf-8">
    <title>AntiBullying - Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="/static/ico/favicon.png">
  <style type="text/css"></style></head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">AntiBullying</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right" style="margin-left:25px">    
               <a href="/logout/" class="navbar-link">Log out</a>
            </p>
            <p class="navbar-text pull-right">
              Logged in as {{usuario.first_name}} {{usuario.last_name}}
            </p>

            <ul class="nav">
              <li class="active"><a href="#">Dashboard</a></li>
              <li><a href="#about">Settings</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
          <span class="span3"></span>
          <span class="span6" id="alert-section">
<!--             <div class="alert">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Warning!</strong> Best check yo self, you're not looking too good.
            </div> -->
          </span>
          <span class="span3"></span>
      </div>

      <div class="row-fluid">
          <span class="span3"></span>
          <span class="span6" id="observable-list">
          </span>
          <span class="span3">
            <button id="add-obv-btn" class='btn'> Add new observable</button>
          </span>
      </div><!--/row-->


      <div id="add-obv-form-modal" class="modal hide fade">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3>Add Observable</h3>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
              <div class="control-group">
                <label class="control-label" for="inputFirstName">Observable Username</label>
                <div class="controls">
                  <input type="text" id="username" placeholder="username">
                </div>
              </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn" type="button" type="button" data-dismiss="modal" aria-hidden="true">Close</button>
          <button class="btn btn-primary" id="add-obv-form-btn">Add</button>
        </div>
      </div>

      <hr>

      <footer>
        <p>AntiBullying© Company 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script>

    function add_report(r, container){
          var lvl = 'success';
          console.log(r.rank)
          if(r.ranking==2){
              lvl = 'warning';
          }
          if(r.ranking==3){
              lvl = 'important';
          }
          html = $('<div class="row-fluid" id="report-'+ r.r_id+'" ><span class="span12"><span class="span1"><span class="label label-'+ lvl +'"><i class="icon-warning-sign"></i></span></span><span class="span8"><p>'+r.text+'</p><p><strong>Detected at:</strong> '+ r.created_at+'</p></span><span class="span3"><div class="btn-group"><button class="btn btn btn-inverse" id="not-btn-'+r.r_id+'"><strong>X</strong></button><button class="btn btn btn-success" id="low-btn-'+r.r_id+'"><strong>L</strong></button><button class="btn btn btn-warning" id="medium-btn-'+r.r_id+'"><strong>M</strong></button><button id="high-btn-'+r.r_id+'" class="btn btn btn-danger"><strong>H</strong></button></div></span></span><div class="row-fluid"><span class="span2"><img class="thumbnail"data-src="holder.js/40x40" src="'+ r.aggressor.profile_image_url +'" style="width:40px;height:40px;margin-left:15px" alt="40x40" ></span><span class="span6"><h4>Aggressor</h4><h6><strong class="text-info">@'+r.aggressor.screen_name+'</strong> Ranking: '+ r.aggressor.ranking +'</h6></span><span class="span4"></span></div></div>');
          container.append(html);

          $("#not-btn-"+r.r_id).on('click',function(){
              set_rank(r.r_id, 0);   
          })
          $("#low-btn-"+r.r_id).on('click',function(){
              set_rank(r.r_id, 1);  
          })
          $("#medium-btn-"+r.r_id).on('click',function(){
              set_rank(r.r_id, 2);  
          })
          $("#high-btn-"+r.r_id).on('click',function(){
              set_rank(r.r_id, 3);  
          })
    }
    function set_rank(r_id, rank){
        $.ajax({
            type:'PUT',
            url:'/api/reports/'+r_id+"/",
            dataType:'json',
            data:{'rank':rank},
            success:function(resp){
                alert('Thanks for your colaboration!');
            }
        })
    }


    function add_observable(o){
        var messages;
        // $.ajax({
        //     url:'/api/'+username+'/reports/'
        // });
        html = $('<div id="observable-container-'+o.o_id+'"><div class="row-fluid"><span class="span12" data-toggle="collapse" data-target="#observable-'+o.o_id+'" style="cursor: pointer"><span class="row-fluid"><span class="span12"><span class="span3"><img class="thumbnail"data-src="holder.js/260x180" src="'+ o.profile_image_url +'" alt="260x180" ></span><span class="span8"><h1>'+ o.name+'</h1><a href="#">@'+o.screen_name+'</a></span><span class="span1"><button type="button" class="close" id="delete-obv-'+o.o_id+'">&times;</button></span></span></span></span></div><div class="row-fluid"><span class="span12"><div class="collapse out" id="observable-'+o.o_id+'"><br/></div></span></div></div>');
        $('#observable-list').append(html);
        $('#observable-collapse-'+o.o_id).collapse();
        $('#observable-'+o.o_id).on('show',function(){
            $.ajax({
                url:'/api/'+username+'/observables/'+o.o_id+'/reports/',
                dataType:'json',
                success: function(resp){
                  data = resp.data;
                  for(i in data){
                      r = data[i];
                      add_report(r, $('#observable-'+o.o_id));
                  }
                }
            });
        });
        $('#observable-'+o.o_id).on('hide',function(){
            $(this).html('<br/>');
        });

        $('#delete-obv-'+o.o_id).click(function(){
            $.ajax({
              url:'/api/'+username+'/observables/'+o.o_id+'/',
              dataType:'json',
              type:'delete',
              success:function(resp){
                  $('#observable-'+o.o_id).remove();
                  $('#observable-container-'+o.o_id).remove();
              }
          });
        });

    }
    var username = "{{usuario.username}}";
        $('document').ready(function(){
          $.ajax({
              url:'/api/'+username+'/observables/',
              dataType:'json',
              success:function(resp){
                  obs = resp.data;

                  console.log(obs)
                  for(i in obs){
                    o = obs[i];
                    add_observable(o)
                  }
              }
          });


       
          $("#add-obv-btn").click(function(){
              console.log('entro!!')
              $('#add-obv-form-modal').modal('show');
          });
          $('#add-obv-form-btn').click(function(){
            $('#add-obv-form-modal').modal('hide');
             $.ajax({
                url: '/api/'+username+'/observables/',
                type: 'POST',
                dataType: 'json',
                data: {'username': $('#username').val()},
                success: function(resp){
                    o = resp.data;
                    add_observable(o)
                }
             });
          });



        });
    </script>
  </div>
  </body>
</html>